<script type="text/javascript" src="{{$HELPER_URL}}js/admin.new.js"></script>
<script type="text/javascript" src="{{$LAYOUT_HELPER_URL}}admin/js/ckeditor/ckeditor.js"></script> 
<script type="text/javascript" src="{{$LAYOUT_HELPER_URL}}admin/js/ckfinder/ckfinder.js"></script>  
<link href="{{$LAYOUT_HELPER_URL}}admin/js/jquery-ui/css/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="{{$LAYOUT_HELPER_URL}}admin/js/jquery-ui/js/jquery-ui.js"></script>
<script src="{{$LAYOUT_HELPER_URL}}admin/js/jquery.slug.js"></script>

<style>
	.ui-autocomplete {
		max-height: 200px;
		overflow-y: auto;
		/* prevent horizontal scrollbar */
		overflow-x: hidden;
		/* add padding to account for vertical scrollbar */
		padding-right: 20px;
	}
	/* IE 6 doesn't support max-height
	 * we use height instead, but this forces the menu to always be this tall
	 */
	* html .ui-autocomplete {
		height: 100px;
	}
</style>

<script type="text/javascript">

function split( val ) {
	return val.split( /,\s*/ );
}
function extractLast( term ) {
	return split( term ).pop();
}

function addInput()
{
     var value = $("#a").val();
     
     jQuery.ajax({
         url: '{{$APP_BASE_URL}}product/admin/add-input',
       type: "POST",
       data: {'value':value},
         beforeSend: function( xhr ) {
         },
         success: function( data ) {
        //Do anything
            //alert(data);
             appendOptionLast(data,value);
         }
      });
}

jQuery(document).ready(function (){
    //Datepicker
    jQuery( ".date" ).datepicker({
        showAnim        : 'slideDown',
        showButtonPanel : true,
        dateFormat      : '{{$datepickerFormat.js}}'
    });
    jQuery("#input_price").trigger('keyup');
    jQuery("#sale_price").trigger('keyup');

    var availableUnit = new Array();
    {{foreach from=$allUnits item=item key=k}}
    availableUnit[{{$k}}] = "{{$item.name}}";
     {{/foreach}}
                         
  		$( "#unit" )
  			// don't navigate away from the field on tab when selecting an item
  			.bind( "keydown", function( event ) {
  				if ( event.keyCode === $.ui.keyCode.TAB &&
  						$( this ).data( "autocomplete" ).menu.active ) {
  					event.preventDefault();
  				}
  			})
  			.autocomplete({
  				minLength: 0,
  				source: function( request, response ) {
  					// delegate back to autocomplete, but extract the last term
  					response( $.ui.autocomplete.filter(
  							availableUnit, extractLast( request.term ) ) );
  				},
  				focus: function() {
  					// prevent value inserted on focus
  					return false;
  				},
  				
  			});
    
});

function showMenu() {
    $("#unit").autocomplete( "search" , '' );
}

function appendOptionLast(num,value)
{
  var elOptNew = document.createElement('option');
  elOptNew.text =  value;
  elOptNew.value =  num;
  var elSel = document.getElementById('add');

  try {
    elSel.add(elOptNew, null); // standards compliant; doesn't work in IE
  }
  catch(ex) {
    elSel.add(elOptNew); // IE only
  }
}

</script>

<style type="text/css">
    #images { list-style-type: none; margin: 0; padding: 0;}
    #images li { margin: 10px; float: left; text-align: center;  height: 180px;}
    #files { list-style-type: none; margin: 0; padding: 0;}
    #files li { margin: 10px; height: 30px;}
    #properties { list-style-type: none; margin: 0; padding: 0;}
    #properties li { margin: 10px; height: 700px;}
</style>
            <div class="content-box"><!-- Start Content Box -->
                
                <div class="content-box-header">
                    
                    <h3>Chỉnh sửa sản phẩm</h3>
                    
                    <div class="clear"></div>
                    
                </div> <!-- End .content-box-header -->
                
                <div class="content-box-content">
                
                    <form action="" method="post">
                    
                    <!-- LANGUAGES -->
                    <div class="tab-content" id="tab{{$lang.lang_id}}">
                            
                            <!-- ERROR -->
                        {{if $errors|@count > 0}}
                        <div class="notification error png_bg">
                            <a href="#" class="close"><img src="{{$LAYOUT_HELPER_URL}}admin/images/icons/cross_grey_small.png" title="Close this notification" alt="close" /></a>
                            <div>
                                {{if $errors.main}}
                                    Error: {{$errors.main}}
                                {{else}}
                                    Error: Please check following information again
                                {{/if}} 
                                                                       
                            </div>
                        </div>
                        {{/if}}
                            
                            
                            <fieldset> <!-- Set class to "column-left" or "column-right" on fieldsets to divide the form into columns -->
                                
                                
<!--                                <p>-->
<!--                                    <label>Sorting<span class="red">*</span><br/><br/></label>-->
<!--                                        <input class="text-input small-input" type="text"  name="data[sorting]" value="{{$data.sorting}}" />{{if $errors.repeat_password}}<span class="input-notification error png_bg"></span>{{/if}}-->
<!--                                        <br /><small>No 1 will display as first article</small>-->
<!--                                </p>-->
                               

                                <p>
                                    <label>Tên sản phẩm</label>
                                    <input class="text-input small-input" type="text"  name="data[title]" value="{{$data.title}}" />
                                </p>
                                
                               <p>
                                    <label>Nhà sản xuất</label>
                                    <input class="text-input small-input" type="text"  name="data[provider]" value="{{$data.provider}}" />
                                </p>
                                
                                <p>
                                    <label>Ngày tạo</label>
                                        <input class="text-input small-input date" type="text"  name="data[created_date]" value="{{$data.created_date}}" />
                                        <br /><small>Format: {{$datepickerFormat.display}}</small>
                                </p>
                               
                                
                                <p>
                                    <label>Giá nhập</label>
                                    <input class="text-input small-input" type="text" onkeyup="FormatNumber(this);" id="input_price"  name="data[input_price]" value="{{$data.input_price}}" />
                                    <br /><small>ngàn đồng (VND)</small>
                                </p>
                                
                                <p>
                                    <label>Giá bán</label>
                                    <input class="text-input small-input" type="text" onkeyup="FormatNumber(this);" id="sale_price"  name="data[sale_price]" value="{{$data.sale_price}}" />
                                    <br /><small>ngàn đồng (VND)</small>
                                </p>
                                
                                 <div>
                                    <label>Tồn kho</label>
                                    <div style="float: left;width: 120px;">
                                    <input class="text-input small-input" style="width: 80px;height: 21px;" type="text"  name="data[store]" value="{{$data.store}}" />
                                    </div>
                                    
                                    
                                    <div class="ui-widget" style="width: 180px;float: left ;height: 30px;">
                                         
<!--                                        <select id="combobox" name="data[unit]" id="unit" class="small-input">-->
<!--                                       {{foreach from=$allUnits item=item}}-->
<!--                                            <option value="{{$item.unit_id}}" {{if $item.unit_id == $data.unit}}selected="selected"{{/if}}>{{$item.name}}</option>-->
<!--                                        {{/foreach}}-->
<!--                                        </select> -->
									<input class="small-input"  style="width:100px;" id="unit" name="data[unit]" value="{{$data.unit}}"> 
									
                                  		<button aria-disabled="false" role="button" class="ui-button ui-widget ui-state-default ui-button-icon-only ui-corner-right ui-button-icon" title="Show All Items" tabindex="-1" style="margin-left:-10px;" onclick="showMenu();" type="button"><span class="ui-button-icon-primary ui-icon ui-icon-triangle-1-s"></span><span class="ui-button-text">&nbsp;</span></button>
                                        
                                     </div>
                                </div>
                                
                                
       
                                <br/>
                                <br/>
                                
                             
                                
                                
                                <p>
                                <br/>
                                    <input class="button submit" type="button" value="Save" />
                                </p>
                                
                            </fieldset>
                            
                            <div class="clear"></div><!-- End .clear -->
                            
                    </div>
                                
                        
                    
                  </form>
                  
                </div> <!-- End .content-box-content -->
                
            </div> <!-- End .content-box -->
            
            
            <div class="clear"></div>

